<template>
	<view class="content">
		<!-- 轮播 -->
		<u-swiper :list="data.list" indicator indicatorMode="dot" circular indicatorActiveColor="#36f"
			indicatorInactiveColor="#ccc" radius="10"></u-swiper>
		<!-- 四宫格 -->
		<view class="col">
			<u-grid :border="false" col="4">
				<u-grid-item class="col1" v-for="(listItem,listIndex) in data.list1" :key="listIndex">
					<image class="img" :src="listItem.pic" mode="aspectFill"></image>
					<text class="grid-text">{{listItem.name}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!-- 第三 -->
		<view class="notice">
			<u-notice-bar class="bar" :text="data.text"></u-notice-bar>
		</view>
		<!-- 第四 -->
		<!-- 热门推荐 -->
		<view class="text-area">
			<u-line color="#ccc" margin="3px 0px"></u-line>
			<text>热门推荐</text>
		</view>
		<u-scroll-list>
			<view v-for="(item, index) in data.list2" :key="index">
				<image class="img1" :src="item.thumb"></image>
				<text class="textc">热卖场</text>
			</view>
		</u-scroll-list>
		<!-- 新品推荐 -->

		<view class="text-area">
			<u-line color="#ccc" margin="3px 0px"></u-line>
			<text>新品推荐</text>
		</view>
		<u-scroll-list>
			<view v-for="(item, index) in data.list2" :key="index">
				<image class="img1" :src="item.thumb"></image>
				<text class="textc">潮流款</text>
			</view>
		</u-scroll-list>
		<!-- 第五 -->
			<view class="text-area">
			<u-line color="#ccc" margin="3px 0px"></u-line>
			<text>猜你喜欢</text>
		</view>
		<view class="bot">
			<view class="bot1" v-for="(item, index) in data.likelist" :key="index">
				<image :src="item.pic" mode="scaleToFill"></image>
				<view class="textflex" >
					{{item.name}}
				</view>
			</view>
		</view>


		<!-- 结尾处 -->
	</view>
</template>
<script setup>
	import request from "@/api/request.js"
	import {
		reactive,
	} from 'vue'
	const data = reactive({
		text: "限时活动:简野(JIANYE)..原价23900元,现价2560元",
		title: 'word',
		likelist: [],
		list: [
			'https://yanxuan.nosdn.127.net/31da695c84cabd0eaff054265da29e5c.jpg',
			'https://yanxuan.nosdn.127.net/baea18aa59217cabd190b19fc1cf1617.jpg',
			'https://yanxuan.nosdn.127.net/d5683f01e132851229be21c52d808b62.jpg',
			'https://yanxuan.nosdn.127.net/af7d906e174cb160ab5a979310aa223d.jpg'
		],
		list1: [{

				name: 'photo',
				title: '一一',
				pic: "//gw.alicdn.com/bao/uploaded/i3/2208391295052/O1CN01cVxIGd1nBrkn5hR8w_!!2-item_pic.png_300x300q90.jpg_.webp",
				name: "裙子"
			},
			{
				name: 'lock',
				title: '二二',
				pic: "//gw.alicdn.com/bao/uploaded/i4/2210014017908/O1CN019x8CTS28HuwBc4UQA_!!0-item_pic.jpg_300x300q90.jpg",
				name: "行李"
			},
			{
				name: 'star',
				title: '三三',
				pic: "//gw.alicdn.com/bao/uploaded/i2/742905027/O1CN016jmIgT1n0PjnekmdX_!!742905027.jpg_300x300q90.jpg",
				name: "包包"
			},
			{
				name: 'hourglass',
				title: '四四',
				pic: "//gw.alicdn.com/bao/uploaded/i3/2212113712699/O1CN01H93spD1VoBkGKCbiX_!!0-item_pic.jpg_300x300q90.jpg",
				name: "饰品"
			}
		],
		list2: [{
			thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
		}, {
			thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
		}, {
			thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
		}, {
			thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
		}, {
			thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
		}]
	})
	// const getBot=
	request({
		url: "/lejuClient/home/saleMostProducts",
		method: "get",
	}).then(response => {
		let a = response.data;
		console.log(a.items)
		data.likelist = a.items
		console.log(data.likelist)
		// 处理响应数据
	}).catch(error => {
		console.error(error);
	});
</script>

<style>
	.textflex{
		width:200rpx;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0px 20px;
	}
	.section-series{
		border: 2px solid red;
		height: 600px
	}
	.bot {
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		 justify-content: space-evenly; 
	}

	.bot .bot1 {
		/* margin: 10px 10px; */
		margin-bottom: 12px;
	}

	.textc {
		padding: 0px 32rpx;
	}

	.bot image {
		width: 350rpx;
		height: 300rpx;
	}

	.img1 {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10px;
	}

	.content {
		background-color: #f5ebe7;

	}

	.notice {
		margin: 5px 5px;

	}

	.bar {
		border-radius: 15px
	}

	.col {
		padding: 5px 0 5px 0;
		margin-top: 10px;
		/* background-color: aqua; */
		/* font-size: 30rpx; */
	}

	.col1 {
		margin-bottom: 5px;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
		padding: 5px 0;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		font-size: 30rpx;
		font-weight: 700;
		margin: 30px 0 10px 0;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>